import React from 'react'
import { connect } from 'react-redux'
class Obj extends React.Component {
    constructor(props) {
        super(props)
        
    }
    // componentDidMount() {
    //     const {objCfg, ArrObj, xiugai, index} = this.props
    //     this.props.setStates(objCfg, ArrObj, xiugai, index)
    // }
    add() {
        const { objCfg, ArrObj } = this.props
        let arr = ArrObj
        arr.push({ ...objCfg })
        this.setState({
            ArrObj: arr
        })
        console.log(ArrObj)
    }
    remover(index) {
        const { objCfg, ArrObj } = this.props
        let arr = ArrObj
        arr.splice(index, 1)
        this.setState({
            ArrObj: arr
        })
    }
    amend(index) {
        const { objCfg, ArrObj, xiugai } = this.props
        let obj = ArrObj[index]
        this.setState({
            xiugai: obj,
            index: index
        })
    }
    //修改数据
    num({ target }) {
        // 获取
        const { xiugai } = this.props
        // 锁定对象下的属性
        const a = target.name;
        // 拷贝
        const xiu = { ...xiugai }
        // 赋值
        xiu[a] = target.value
        // console.log(a)
        this.setState({
            // 上传
            xiugai: xiu
        })
    }
    // 上传修改好的
    up() {
        const { objCfg, ArrObj, xiugai, index } = this.props
        const arr = [...ArrObj],
            xiu = xiugai;
        arr.splice(index, 1, xiu)
        this.setState({
            ArrObj: arr,
            xiugai: {
                name: null,
                age: null,
                id: '',
                home: ''
            }
        })
    }
    render() {
        const { objCfg, ArrObj, xiugai } = this.props
        return (
            <div>
                {
                    ArrObj.map((item, index) => {
                        return <div key={index}>
                            {item.name}
                            {item.age}
                            {item.id}
                            {item.home}
                            <button onClick={() => this.amend(index)}>修改</button>
                            <button onClick={() => this.remover(index)}>删除</button>
                        </div>
                    })
                }
                {
                    <div>
                        <input type="text" value={xiugai.name} name='name' onChange={(e) => this.num(e)} />
                        <input type="text" value={xiugai.age} name='age' onChange={(e) => this.num(e)} />
                        <input type="text" value={xiugai.id} name='id' onChange={(e) => this.num(e)} />
                        <input type="text" value={xiugai.home} name='home' onChange={(e) => this.num(e)} />
                        <button onClick={() => this.up()}>上传</button>
                    </div>
                }
                <button onClick={() => this.add()}>增加</button>
            </div>
        )
    }
}

// function mapStateToProps(state) {
//     return {
//         obj: state.obj
//     }
// }
// const mapDispatchToProps = (dispatch, ownProps) => {
//     return {
//         setStates: () => dispatch(setStates(objCfg, ArrObj, xiugai, index))
//     }
// }

// export default connect(mapStateToProps, mapDispatchToProps)(Obj)

export default Obj

